<template>
    <div class="BusinessArrears-box">
        <h5>账款进度</h5>
        <div ref="target" class="content"></div>
    </div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
import 'echarts-liquidfill';

// const props = defineProps({
//     data: {
//         type: Object,
//         required: true,
//     },
// });
let target = ref(null);
let myChart = null;
onMounted(() => {
    myChart = echarts.init(target.value);
    renderChart();
});
// watch(
//   () => props.data,
//   () => {
//     renderChart();
//   }
// );
const ColorList = ['#89FEBA', '#5EDCEB', '#8E87FF'] // 链群颜色值
var arrayTemp = [

    {
        value: 40,
        name: '账款回收进度',
        num: 1000,
    },
    {
        value: 50,
        name: '经营账款进度',
        num: 1000,
    },
    {
        value: 70,
        name: '目标完成进度',
        num: 1000,
    },
];
var titleData = []
var series = []
arrayTemp.forEach((item, index) => {
    const color = ColorList[index];
    titleData.push({
        text: item.name,
        x: `${35 * (index + 0.4)}%`,
        y: '95%',
        textAlign: 'center',
        textStyle: {
            fontSize: '16',
            // color: color,
            textAlign: 'center',
        },
    });
    series.push({
        type: 'liquidFill',
        name: item.name,
        radius: '55%',
        center: [`${35 * (index + 0.44)}%`, '50%'],
        data: [
            item.value / 100,
        ],
        backgroundStyle: {
            color: 'transparent',
        },
        color: [color],
        itemStyle: {
            opacity: 0.55,
            shadowColor: '#2D4A8C',
        },
        outline: {
            borderDistance: 5,
            itemStyle: {
                borderWidth: 1,
                borderColor: color,
                shadowBlur: 10,
                shadowColor: '#12786f'
            },
        },
        label: {
            show: true,
            position: ['50%', '50%'],
            formatter: function () {
                return `${item.value}%`;
            },
            fontSize: 26,
            color: '#666', //波浪上文本颜色
            insideColor: '#fff', //波浪内部字体颜色
        }

    });
});
let options = {
    title: titleData,
    series: series,
    backgroundColor: '#fff',
    tooltip: {
        show: true,
    },
};

const renderChart = () => {
    myChart.setOption(options);

    // 图表自适应
    window.addEventListener('resize', () => {
        myChart.resize()
    })
};
</script>
<style scoped lang='scss'>
.BusinessArrears-box {
    width: 100%;
    height: 100%;
    cursor: pointer;

    h5 {
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: black;
        font-size: 20px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        font-weight: 600;
        margin: 40px 0;


        &::after {
            content: '';
            width: 5px;
            height: 20px;
            background-color: #1947FF;
            border-radius: 5px;
            position: absolute;
            left: -9px;
            top: 0px;
        }
    }


    .content {
        width: 100%;
        height: calc(100% - 86px);
    }
}
</style>
